<%-- 
    Document   : editInfo
    Created on : Jul 5, 2013, 10:44:18 PM
    Author     : ASUS K43E
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Profile | Lafitte</title>
        <link rel="shortcut icon" href="./images2/logo.jpg">

        <style type="text/css">
            body{
                background-image: url(images2/Untitled.jpg);
                background-repeat: no-repeat;
                background-color: black;
            }
        </style>
        <script>
            function valiNum(tele){
                var reg = /^\d+$/
                if(tele.value.length == 0){
                    return true;
                }else if (reg.test(tele.value) == false)
                {
                    alert('Only numbers are accepted!');
                    return false;
                }
                return true;
            }

            function valiTele(tele){
                var reg1 = /^09([0-9]{8})$/;
                var reg2 = /^01([0-9]{9})$/;

                if(tele.value.length == 0){
                    return true;
                }else if (reg1.test(tele.value) == false && reg2.test(tele.value) == false){
                    document.getElementById("teError").innerHTML='Invalid telephone number!';
                    return false;
                }
                document.getElementById("teError").innerHTML='';
                return true;
            }

            function valiBacc(name){
                if(name.value.length==0){
                    document.getElementById("baccError").innerHTML='Bank account is required!';
                    return false;
                }
                document.getElementById("baccError").innerHTML='';
                return true;
            }

            function valiBName(name){
                if(name.value.length==0){
                    document.getElementById("bNameError").innerHTML='Bank name is required!';
                    return false;
                }
                document.getElementById("bNameError").innerHTML='';
                return true;
            }
        </script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span4"></div>
                <div class="span8" align="center">
                    <jsp:include page="menubar.jsp"/>
                    <h2 style="color: white"><font>Customer's Profile</font></h2>
                    <form action="Controller" method="POST">
                        <table>
                            <tr>
                                <td style="color: white">Username</td>
                                <td><input type="text" name="txtUsername" value="${USER}" readonly="true"/> </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td style="color: white" align="right">
                                    <a href="changePass.jsp" class="alert-info">[Change Password]</a>
                                </td>
                            </tr>
                            <tr>
                                <td style="color: white">Full name</td>
                                <td><input type="text" value="${USERLIST.account.fullname}" readonly="true"/></td>
                            </tr>
                            <tr>
                                <td style="color: white">Gender</td>
                                <td><input type="text" value="${USERLIST.gender}" readonly="true"/></td>
                            </tr>
                            <tr>
                                <td style="color: white">E-mail</td>
                                <td><input type="text" value="${USERLIST.account.email}" readonly="true"/></td>
                            </tr>
                            <tr>
                                <td style="color: white">ID card no.</td>
                                <td><input type="text" value="${USERLIST.id}" readonly="true"/></td>
                            </tr>
                            <tr>
                                <td style="color: white">Date of birth</td>
                                <td><input type="text" value="${USERLIST.dateOfBirth}" readonly="true"/></td>
                            </tr>
                            <tr>
                                <td style="color: white">Occupation</td>
                                <td><input type="text" name="txtJob" value="${USERLIST.job}"/></td>
                            </tr>
                            <tr>
                                <td style="color: white">Address</td>
                                <td><input type="text" name="txtAddress" value="${USERLIST.account.address}"/></td>
                            </tr>
                            <tr>
                                <td style="color: white">Telephone no.</td>
                                <td>
                                    <input type="text" name="txtTelephone" value="${USERLIST.account.telephone}"
                                           onblur="valiTele(this);" onkeyup="valiNum(this);"/>
                                </td>
                                <td><label style="color: red" id="teError"></label></td>
                            </tr>
                            <tr>
                                <td style="color: white">Bank account no.</td>
                                <td><input type="text" name="txtBank" value="${USERLIST.bankAccount}"
                                           onblur="valiBacc(this);" onkeyup="valiNum(this);"/>
                                </td>
                                <td><label style="color: red" id="baccError">
                                        <c:if test="${not empty MESSBACC}">
                                            ${MESSBACC}
                                        </c:if>
                                    </label></td>
                            </tr>
                            <tr>
                                <td style="color: white">Bank name</td>
                                <td><input type="text" name="txtBankName" value="${USERLIST.bankName}"onblur="valiBName(this);"/></td>
                                <td><label style="color: red" id="bNameError">
                                        <c:if test="${not empty MESSBANAME}">
                                            ${MESSBANAME}
                                        </c:if>
                                    </label></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td align="right">
                                    <input type="submit" value="Save Changes" name="btAction" class="btn btn-inverse"/>
                                    <input type="reset" value="Cancel" class="btn btn-inverse"/>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div></div>
            </div>
        </div>
        <jsp:include page="footer.jsp" />
    </body>
</html>
